<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery&css</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>
    <style>
        div{
            width: 100px;
            height: 260px;
        }
        div.whiteborder{
            border: 2px white solid;
        }
        div.redDiv{
            background-color: red;
        }
        div.blueBorder{
            border: 5px blue solid;
        }
    </style>


    <script>
        $(function (){
            var $divEle = $("div:first");
            $("#btn01").click(function (){
                //addClass() - 向被添加的元素添加一个或者多个类
                $divEle.addClass('redDiv blueBorder');
            });

            $("#btn02").click(function(){
                //removeClass() - 从被选元素删除一个或者多个类
                $divEle.removeClass("redDiv blueBorder");
            });

            $("#btn03").click(function (){
                //toggleClass() - 对被选元素记性添加/删除类的切换操作
                $divEle.toggleClass("redDiv blueBorder");
            });

            $("#btn04").click(function (){
                //offset() - 返回第一个匹配元素相对于文档的位置
                var pos = $divEle.offset();
                $divEle.offset({
                    top:100,
                    left: 50
                });
                console.log(pos);
            });

        })
    </script>

</head>
<body>
<p id="text_show">
    addClass() 添加样式<br/>
    removeClass() 删除样式<br/>
    toggleClass() 有就删除,没有就添加样式<br/>
    offset() 获取和设置元素的坐标<br/>
</p>

    <table align="center">
        <tr>
            <td>
                <div class="border">

                </div>
            </td>
            <td>
                <div class="btn">
                    <input type="button" value="addClass()" id="btn01" />
                    <input type="button" value="removeClass()" id="btn02" />
                    <input type="button" value="toggleClass()" id="btn03" />
                    <input type="button" value="offset()" id="btn04" />
                </div>
            </td>
        </tr>
    </table>
</body>

</html>